@import '~default.less';

.web-header {
  height: @header-height;
  background: #001529;
  border-bottom: 1px solid #e6e6e6;

  &-appname{
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: @header-height;
    padding:0 16px;
  }
  &-nav {
    padding-left: 16px;
    &-item {
      margin: 12px;
      line-height: 32px;
      font-size: 14px;
      font-weight: 600;
      color: #f0f0f0;
      padding: 0 16px;
      display: inline-block;
      &:hover,&-active {
        background-color: #1890ff;
        color: #ffffff;
      }
    }
  }
  &-user {
    @user-size: 48px;
    &-icon {
      width: @user-size;
      height: @user-size;
      border-radius: 50%;
      overflow: hidden;
      background-color: #cccccc;
      margin: 6px;
    }
    &-name {
      line-height: @user-size;
      margin: 6px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      padding-right:8px;
    }
  }
}
